import React, { memo, useEffect, useState } from 'react'
import { Radio, Space, Loading } from 'tdesign-react';
import FixedTopic from './FixedTopic';
import RandomTopic from './RandomTopic';
import { useOutletContext, useSearchParams } from 'react-router-dom';

const Topic = memo(() => {
    const { exam, handleExamUpdate } = useOutletContext()
    const curtype = JSON.parse(JSON.stringify(exam.type))
    const [searchParams, setSearchParams] = useSearchParams()
    const [type, setType] = useState(true)
    const [load, setload] = useState(false)
    useEffect(() => {
        let timer = setTimeout(() => {
            setload(true)
        },1000)
        return () => {
            clearTimeout(timer)
        }
    }, [])
    useEffect(() => {
        if (searchParams.get('_id')) {
            setType(exam.type)
        } else {
            handleExamUpdate({ type: type })
        }
    }, [curtype])
    const setT = async (v) => {
        setType(v)
        await handleExamUpdate({ type: v })
    }
    return (
        <div id='topic' className='animate__animated animate__fadeInDown'>
            <Space direction="vertical">
                <h4 style={{ margin: '10px 0 0 0' }}>抽题范围</h4>
                <Radio.Group value={type} onChange={(v) => setT(v)}>
                    <Radio value={false}>随机抽题</Radio>
                    <Radio value={true}>固定题目</Radio>
                </Radio.Group>
            </Space>
            {
                load ? (type ? <FixedTopic /> : <RandomTopic />) : <Loading className='load' />
            }
        </div>
    )
});

export default Topic
